<template>
    <div class="icons">
        <swiper :options="swiperOption" >
            <swiper-slide v-for="(pg,index) of pages" :key="index">
                <div class="icon" v-for="item of pg" :key="item.id">
                    <div class="img">
                        <img :src="item.imgUrl" alt="">
                    </div>
                    <p class="img-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'icons',
    props: {
        icon_list : Array,
    },
    data () {
        return{
            swiperOption: {
                pagination: '.swiper-pagination'
            },
            // icon_list1: 
            //     [
            //          {
            //             "id": "001",
            //             "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png",
            //             "desc": "景点"
            //         }
            //     ]
            
        }
    },
    computed: {
        // 分页
        pages () {
            const pages = []; 
            this.icon_list.forEach(function(item,index){
                const page = Math.floor(index / 8); //向下取整
                if(!pages[page]){ 
                    pages[page] = [];
                }
                pages[page].push(item); //pages二维数组
            })
            console.log(pages);
            console.log(this.icon_list);
            return pages;
        }

    }
}
</script>

<style scoped>
.icons >>> .swiper-container{
    height: 0;
    padding-bottom: 50%;
}
  .icons{
      margin-top: 1px;
  }
  .icon{
      float: left;
      width: 25%;
      padding-bottom: 25%;
      overflow: hidden;
      position: relative;
      height: 0;
  }
  .icon .img{
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 20px;
  }
  .icon .img img{
      height: 100%;
      display: block;
      margin: 0 auto;
  }
    .img-desc{
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        line-height: 20px;
        height: 20px;
        text-align: center;
        /* 以...代替超出的文本 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>


